<template>
  <div class="resume">
    <div class="content">
      <el-row type="flex" class="row-bg" justify="center">
        <el-col :xs="20" :sm="6" :md="6" :lg="6" :xl="6">
          <left :detail="detail"></left>
        </el-col>
        <el-col :xs="20" :sm="18" :md="18" :lg="18" :xl="18">
          <div class="right">
            <div class="video">
              <!-- <img :src="video" alt="" /> -->
              <!-- <video-player
                                class="video-player vjs-custom-skin"
                                ref="videoPlayer"
                                :playsinline="true"
                                :options="playerOptions"
              ></video-player>-->

              <video v-if="showVideo" :src="sss" controls="controls" class="video-el" ref="video"></video>
              <img v-else :src="imgPre" alt :class="{'Active':Active,'activeTwo':activeTwo}" />
              <div class="fix" v-if="videoBtn && showVideo">
                <div @click="playVideo">
                  <i class="el-icon-caret-right"></i>
                </div>
              </div>
            </div>
            <div  :class="{'imgs':imgactive,'imgss':imgactiveTwo}">
              <img class="imgvideo" :src="videoPre" @click="showVideo = true" alt />
              <img
                @click="
                                    imgPre = detail.base_url+item;
                                    showVideo = false;
                                "
                v-for="(item,
                                index) in detail.photos"
                :key="index"
                :src="detail.base_url+item"
              />
              <!-- <img v-for="(item,index) in detail.photos" :key="index" :src="detail.base_url+item"/> -->
            </div>
            <div class="text">
              <h2>简介</h2>
              <p v-html="introducesTxt"></p>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import left from "@/components/resumeLeft.vue";
import { videoPlayer } from "vue-video-player";
import "video.js/dist/video-js.css";
import videoPre from "@/assets/images/video_pre.png";
export default {
  components: {
    left,
    videoPlayer
  },
  data() {
    return {
      Active: false,
      activeTwo: false,
      imgactiveTwo:false,
      imgactive:false,
      sss:
        "https://zhubaba-nei.oss-cn-hangzhou.aliyuncs.com/%E8%A7%86%E9%A2%91/%E7%8C%AA%E7%88%B8%E7%88%B8APP%E4%BD%BF%E7%94%A8%E6%88%90%E5%93%81.mp4",
      url: "https://api.zhubaba.cn/merchant/task/gmax/",
      merchantGuid: "", // 商户的id
      videoSrc:
        "http://ali.static.yximgs.com/udata/pkg/fe/kwai_video.c8e339ab.mp4",
      detail: {},
      showVideo: true,
      videoPre: videoPre, // 视频小预览图
      videoBtn: true, // 播放视频的按钮
      imgPre: "", // 预览的图片地址
      introducesTxt: "",
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "4:3", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            src:
              "http://ali.static.yximgs.com/udata/pkg/fe/kwai_video.c8e339ab.mp4", // 路径
            type: "video/mp4" // 类型
          }
        ],
        poster: "../../static/images/test.jpg", //你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true //全屏按钮
        }
      }
    };
  },
  created() {
    var flag = this.IsPC();
    
    // flag == true ? (this.Active = true) : (this.activeTwo = true);
    // flag == true ? (this.imgactive = true) : (this.imgactiveTwo = true);
    if(flag==true){
      this.Active = true;
      this.imgactive = true
    }else{
      this.activeTwo = true;
      this.imgactiveTwo = true;
    }

    

    let merchantGuid = this.$route.query.merchantGuid;
    if (merchantGuid) {
      this.merchantGuid = merchantGuid;
      this.init();
    }
    
  },
  methods: {
    introduces() {
      this.$ajax
        .get("/merchant/task/gmax/" + this.detail.introduces)
        .then(res => {
          this.introducesTxt = res.data;
        });
    },
    // /merchant/usermerinfo?merchantGuid
    // getInfo(){
    // 	this.$ajax.get("/merchant/usermerinfo?", {
    // 	    params: {
    // 	        merchantGuid: this.merchantGuid
    // 	    }
    // 	}).then(res => {
    // 	    res = res.data.data;
    // 	    this.detail = res;
    // 	})
    // },
    init() {
      this.$ajax
        .get(`/merchant/usermerinfo?merchantGuid=${this.merchantGuid}`)
        .then(res => {
          // this.detail = res.data.data;

          let data = res.data.data;
          // 切割地区编码
          let regi = data.regi.split(",");
          data.regi = regi;
          // 图片数组转换
          let imgArr = [];
          let photos = data.photos.split(",");
          for (var i = 0; i < photos.length - 1; i++) {
            imgArr.push(photos[i].split(":")[0]);
          }
          data.photos = imgArr;

          // 技能转换
          let skillArr = [];
          let skill = data.skill.split(",");
          for (var i = 0; i < skill.length - 1; i++) {
            skillArr.push(skill[i].split(":"));
          }
          data.skill = skillArr;
          this.detail = data;
          this.introduces();
        });
    },
    IsPC() {
      var userAgentInfo = navigator.userAgent;
      var Agents = [
        "Android",
        "iPhone",
        "SymbianOS",
        "Windows Phone",
        "iPad",
        "iPod"
      ];
      var flag = true;
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false;
          break;
        }
      }
      return flag;
    },
    // 播放视频
    playVideo() {
      this.$refs.video.play();
      this.videoBtn = false;
    }
  }
};
</script>

<style lang="scss" >


.el-row {
  flex-wrap: wrap;
  width: 100%;
}
.imgvideo {
 
  margin-left: -1px;
}
.resume {
  background: #f7f7f7;
  padding: 58px 0;

  .content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .right {
      flex: 1;
      margin: 0 16px;
      background: #fff;
      padding: 38px 54px;
      border-radius: 12px;
      font-family: "黑体";

      .video {
        .video-el {
          width: 100%;
          height: 100%;
          max-width: 100%;
          max-height: 100%;
          border-radius: 3px;
        }
.Active{
width: 760px;height:620px;
}
.activeTwo{
  width: 200px;height:200px;
}
        position: relative;

        > img {
          width: auto;
          height: auto;
          margin: 0 auto;
          display: block;
          max-width: 100%;
        }

        .fix {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 8px;
          background: rgba(0, 0, 0, 0.6);

          > div {
            width: 70px;
            height: 70px;
            background: #434340;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 50px;
            color: #fff;
            border-radius: 8px;
            cursor: pointer;
          }
        }
      }

      .imgs {
        width: 760px;
        .video-pre {
          width: 20%;
          height: 130px;
        }

        padding: 30px 0;

        img {
          padding-left: 10px;
          width: 142px;
          height: 120px;

          cursor: pointer;
        }
      }

      .text {
        h2 {
          font-size: 20px;
          line-height: 50px;
          color: #565656;
        }

        p {
          font-size: 18px;
          line-height: 30px;
          color: #959494;
        }
      }
    }
  }
}

@media screen and (max-width: 750px) {
  .resume .content .right {
    margin: 10px 0;
  }
}
.imgss {
  
  width:250px;
       margin-left:-8px;
        

        padding: 30px 0;

        img {
          padding-left: 10px;
          width: 70px;
          height: 80px;

          cursor: pointer;
        }
      }
</style>
